<!--
 * @Descripttion : 
 * @Autor        : Lilong
 * @Date         : 2022-10-08 16:07:07
 * @LastEditTime : 2022-10-09 11:46:20
 * @FilePath     : \src\App.vue
-->
<script setup lang="ts">
import { shallowRef, triggerRef } from 'vue'

let state = shallowRef({
    a: "a",
    b: {
        c: "c",
    },
});

const change = () => {
  state.value.a = "1";
  state.value.b.c = "1";
  console.log(state)
  triggerRef(state);    //无此行，视图不会更新
}
</script>

<template>
  <h3>triggerRef</h3>
  <h5>
    作用：强制触发一个由shallowRef声明的浅层ref的副作用，即使触发由shallowRef的深层属性不响应式更新视图，解决深层属性视图更新问题
  </h5>
  <h5>
    注意：<br>
    1、triggerRef 是和 shallowRef 配合使用的
  </h5>
  <ul>
    <li>shallowRef.value.a：{{ state.a }}</li>
    <li>shallowRef.value.b.c：{{ state.b.c }}</li>
  </ul>
  <button @click="change">修改</button>
</template>

<style scoped>
ul,li{
  list-style: none;
}
</style>
